<template>
  <el-dialog :close-on-click-modal='false' v-drag :title="record.rule_id ? $t('编辑') : $t('添加')" append-to-body :v-if="dialogVisible" :visible.sync="dialogVisible" width="800px" top="5vh" @close='close'>
    <div class="dialogContentBoxMaxHeight90">
      <el-form ref="form" :model="record" label-width="120px" :rules="rules" label-position="left" style="margin:0 30px;">
        <el-form-item :label="$t('协议名称')" class="cipForm" prop="proto">
          <div style="color:#999;width:250px;">{{ rule[record.proto] }}</div>
        </el-form-item>
        <el-form-item :label="$t('动作')" class="cipForm" prop="action">
          <el-select v-model="record.action" ref="action" size='small' style="width:250px;">
            <el-option v-for="(value, key) in actionList" :key="key" :label="$t(value)" :value="key">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item :label="$t('点类型')" class="cipForm" prop="tag_type">
          <el-select v-model="record.tag_type" ref="tagType" size='small' style="width:250px;">
            <el-option v-for="(value, key) in tagTypeList" :key="value" :label="$t(value)" :value="key">
            </el-option>
          </el-select>
        </el-form-item>
        <el-button type="success" size='small' style="margin-bottom:10px;" @click="addConfig(record.func)" class="addSetting">{{$t('添加配置')}}</el-button>
        <el-table ref="multipleTable" border :data="record.commond_describe_type_name" tooltip-effect="dark" size='mini'>
          <el-table-column prop="commond" align='center' :label="$t('功能码')" />
          <el-table-column prop="describe" align='center' :label="$t('功能码描述')" />
          <el-table-column prop="type" align='center' :label="$t('类型')" />
          <el-table-column prop="name" align='center' :label="$t('点名')" />
          <el-table-column align="center" :label="$t('操作')" width="100" fixed='right'>
            <template slot-scope="scope">
              <el-button type="danger" plain @click="deleteRule(scope.row)" size='mini' :class="'del' + (scope.$index + 1)">{{$t('删除')}}</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submit" class="innerAddSubmit">{{$t('确 定')}}</el-button>
      <el-button @click="close" class="innerAddClose">{{$t('取 消')}}</el-button>
    </span>

    <add-config-dialog v-if="addConfigDialog" ref="RefAddConfigDialog" @addConfigRows='addConfigRows'></add-config-dialog>
  </el-dialog>
</template>
<script>
import ruleArray from '../../ruleArray'
import AddConfigDialog from './AddConfigDialog.vue'
import { selectClass } from '@/utils/input-class.js'
export default {
  components: { AddConfigDialog },
  name: 'CipDialog',
  data () {
    var validateName = (rule, value, callback) => {
      if (!String(value).trim()) {
        callback(new Error(this.$t('不能为空')))
      } else {
        callback()
      }
    }
    return {
      dialogVisible: false,
      addConfigDialog: false,
      record: {
        action: 'accept',
        tag_type: 'array',
        proto: 'cip',
        commond_describe_type_name: []
      },
      recordCopy: {
        action: 'accept',
        tag_type: 'array',
        proto: 'cip',
        commond_describe_type_name: []
      },
      rule: ruleArray.ruleShow,
      tagTypeList: ruleArray.tagTypeCipList,
      cipTypeList: ruleArray.cipTypeList,
      actionList: { 'accept': '允许', 'alert': '告警' },
      rules: {
        name: [{ required: false, validator: validateName, trigger: 'blur' }]
      }
    }
  },
  methods: {
    init (data) {
      this.dialogVisible = true
      this.$nextTick(() => {
        const selectData = ['action', 'tagType']
        selectClass(this.$refs, selectData)
      })
      if (data) {
        this.record = Object.assign(this.record, data)
      }
    },
    submit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.record.commond_describe_type_name.length < 1) {
            this.$messages.error(this.$t('请添加配置'))
          } else {
            var formData = JSON.parse(JSON.stringify(this.record))
            this.$emit('addConfigRuleMap', formData)
          }
        }
      })
    },
    close () {
      this.dialogVisible = false
      this.$emit('childrenClose')
      this.record = Object.assign({}, this.recordCopy)
      this.$refs.multipleTable.clearSelection()
      this.$refs.form.resetFields()
    },
    // 添加规则按钮
    addConfig (data) {
      this.addConfigDialog = true
      this.$nextTick(() => {
        this.$refs.RefAddConfigDialog.init(data)
      })
    },
    addConfigRows (data) {
      this.record.commond_describe_type_name.push(data)
      this.ruleIdChange()
    },
    deleteRule (row) {
      this.record.commond_describe_type_name.splice(row.rule_id - 1, 1)
      this.ruleIdChange()
    },
    // 重新分配规则id
    ruleIdChange () {
      this.record.commond_describe_type_name.forEach((tab, index) => {
        tab.rule_id = index + 1
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.cipForm {
  width: 400px;
}

.cipLength {
  width: 250px;
}
</style>
